<!--  -->
<template>
  <div class="index-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="百年奥莱移动商城"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="search" color="#ffffff" size="24" />
      </template>
      <template #right>
       <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!-- 首页轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="#f00"
      v-if="swiperData.length"
    >
      <van-swipe-item
        v-for="item in swiperData"
        :key="item.goods_id"
        @click="toGoodDetail(item.goods_id)"
      >
        <img :src="item.image_src" alt="首页轮播图" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <van-grid v-if="navData.length">
      <van-grid-item
        :text="item.name"
        v-for="(item, index) in navData"
        :key="item.image_src"
        @click="toCategory(index, item.name)"
      >
        <img class="nav-img" :src="item.image_src" alt="导航图片" />
      </van-grid-item>
    </van-grid>
    <!-- 楼层 -->
    <div class="floor" v-if="floorData.length">
      <div class="floor-item" v-for="(item, index) in floorData" :key="index">
        <!-- title -->
        <div class="floor-title">
          <img :src="item.floor_title.image_src" alt="楼层图片" />
        </div>
        <!-- 列表 -->
        <div class="product-list" v-if="item.product_list.length">
          <div class="big-img">
            <img
              :src="item.product_list[0].image_src"
              alt="大图"
              @click="toGoodList(item.product_list[0].navigator_url)"
            />
          </div>
          <div class="small-img">
            <div
              class="small-item"
              v-for="(product, p) in item.product_list"
              :key="p"
            >
              <img
                v-if="p"
                :src="product.image_src"
                alt="小图"
                @click="toGoodList(product.navigator_url)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部tabbar -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import {
  NavBar,
  Icon,
  Tab,
  Tabs,
  Grid,
  GridItem,
  Swipe,
  SwipeItem,
} from "vant";
import { getHomeBanner, getHomeCates, getHomeFloor } from "@/network/home";
import tabbar from '@/components/tabbar/tabbar.vue';
export default {
  data() {
    return {
      //首页轮播数据
      swiperData: [],
      //首页导航数据
      navData: [],
      //首页楼层数据
      floorData: [],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    //请求轮播图数据
    this.getSwiperData();
    //请求导航数据
    this.getCatesData();
    //请求楼层数据
    this.getFloorData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //点击头部左侧
    onClickLeft() {
      this.$router.push("Search");
    },
    //点击头部右侧
    onClickRight() {
      console.log("点击了头部右侧");
    },
    //去商品详情页
    toGoodDetail(id) {
      this.$router.push({ name: "Detail", params: { id } });
    },
    //去分类页面
    toCategory(index, name) {
      if (index === 0) {
        name = "all";
      }
      this.$router.push({ name: "Category", query: { type: name } });
    },
    //点击去商品列表页
    toGoodList(url) {
      url = url.slice(url.indexOf("=") + 1);
      this.$router.push({ name: "List", query: { type: url } });
    },
    //请求首页的轮播数据
    async getSwiperData() {
      const res = await getHomeBanner();
      if (res.message.length) {
        this.swiperData = res.message;
      }
    },
    //请求首页的导航数据
    async getCatesData() {
      const res = await getHomeCates();
      if (res.message.length) {
        this.navData = res.message;
      }
    },
    //请求首页的楼层数据
    async getFloorData() {
      const res = await getHomeFloor();
      if (res.message.length) {
        this.floorData = res.message;
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    tabbar
  },
  computed: {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.index-container {
  padding-top: 46px;
  padding-bottom: 56px;
}
.index-container >>> .van-nav-bar {
  background-color: #ff6a00;
}
.index-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.van-nav-bar .icon {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.index-container >>> .van-tabs--line .van-tabs__wrap {
  height: 1rem;
}
.index-container >>> .van-tab__text {
  font-size: 16px;
}
/* 轮播图 */
.my-swipe .van-swipe-item img {
  width: 100vw;
}
.index-container >>> .my-swipe .van-swipe__indicator {
  width: 10px;
  height: 10px;
}
/* 导航 */
.index-container >>> .van-grid-item {
  width: 25%;
}
.index-container .nav-img {
  width: 88px;
}
.floor-title {
  margin: 10px 0;
}
.floor-title img {
  width: 100vw;
}
.product-list {
  display: flex;
}
.product-list .big-img img {
  width: 125px;
  height: 208px;
}
.product-list .small-img {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: 208px;
}
.product-list .small-img img {
  width: 120px;
  margin-left: 5px;
}
.product-list .small-item:nth-child(2) img,
.product-list .small-item:nth-child(3) img {
  height: 99px;
  margin-bottom: 5px;
}
.product-list .small-item:nth-child(4) img,
.product-list .small-item:nth-child(5) img {
  height: 104px;
}
</style>